<template>
  <div class="wrapper">
    <parallax class="page-header " :style="headerStyle">
      <!-- <md-card> -->
      <carousel
        style="margin-top: 2.5rem;"
        :per-page="1"
        loop
        :speed="700"
        autoplay
        :autoplay-timeout="5000"
        :mouse-drag="false"
        navigationEnabled
        navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
        navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
      >
        <slide>
          <div class="carousel-caption">
            <h4>
              <md-icon>location_on</md-icon>
              Somewhere Beyond, United States
            </h4>
          </div>
          <img :src="carousel1" alt="carousel1" />
        </slide>
        <slide>
          <div class="carousel-caption">
            <h4>
              <md-icon>location_on</md-icon>
              Yellowstone National Park, United States
            </h4>
          </div>
          <img :src="carousel2" alt="carousel2" />
        </slide>
        <slide>
          <div class="carousel-caption">
            <h4>
              <md-icon>location_on</md-icon>
              Yellowstone National Park, United States
            </h4>
          </div>
          <img :src="carousel3" alt="carousel3" />
        </slide>
      </carousel>
      <!-- </md-card> -->
      <!-- <div class="md-layout">
      <div class="md-layout-item">
        <div class="image-wrapper">
          <div class="brand">
            <h3>PARTNER</h3>
            <br />
            <h3>WORK MORE THAN WORK</h3>
            <br />
            <h3>合作即是成功的开始</h3>
          </div>
        </div>
      </div>
    </div> -->
    </parallax>
    <div style="width: 100%;height: 1000px;background-color: white;">
      123
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "index",
  bodyClass: "index-page",
  props: {
    image: {
      type: String,
      default: require("@/assets/images/banner1.jpg")
    },
    leaf4: {
      type: String,
      default: require("@/assets/img/leaf4.png")
    },
    leaf3: {
      type: String,
      default: require("@/assets/img/leaf3.png")
    },
    leaf2: {
      type: String,
      default: require("@/assets/img/leaf2.png")
    },
    leaf1: {
      type: String,
      default: require("@/assets/img/leaf1.png")
    },
    signup: {
      type: String,
      default: require("@/assets/img/city.jpg")
    },
    landing: {
      type: String,
      default: require("@/assets/img/landing.jpg")
    },
    profile: {
      type: String,
      default: require("@/assets/img/profile.jpg")
    }
  },
  data() {
    return {
      firstname: null,
      email: null,
      password: null,
      leafShow: false,
      classicModal: false,
      selectedDate: new Date("2018/03/26"),
      carousel1: require("@/assets/images/banner1.jpg"),
      carousel2: require("@/assets/images/banner2.jpg"),
      carousel3: require("@/assets/images/banner3.jpg"),
      carousel4: require("@/assets/images/banner4.jpg")
    };
  },
  methods: {
    leafActive() {
      if (window.innerWidth < 768) {
        this.leafShow = false;
      } else {
        this.leafShow = true;
      }
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.image})`
      };
    },
    signupImage() {
      return {
        backgroundImage: `url(${this.signup})`
      };
    }
  },
  mounted() {
    this.leafActive();
    window.addEventListener("resize", this.leafActive);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.leafActive);
  }
};
</script>
<style lang="scss">
.section-download {
  .md-button + .md-button {
    margin-left: 5px;
  }
}

@media all and (min-width: 991px) {
  .btn-container {
    display: flex;
  }
}
</style>
